<script>
import request from '@/libs/request';
import WangEditor from '@/components/wangEditor/index.vue';

export default {
  name: 'articleEdit',
  components: {
    WangEditor,
  },
  data() {
    return {
      modal: false,
      type_list: [],
      data: {
        id: '',
        title: '',
        type_id: '',
        desc: '',
        content: '',
        from_type: 0,
        img_url: '',
        top_status: 1,
      }
    };
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    showModal(id = '') {
      this.data.id = id
      this.modal = true;
      this.getInfo()
    },
    getInfo() {
      request({
        url: '/article/index/info',
        data: {id: this.data.id},
        method: 'post'
      }).then(res => {
        if (res.data.data) {
          this.data = res.data.data
        }
        this.type_list = res.data.cates
      })
    },
    getEditorContent(data) {
      this.data.content = data;
    },
    back() {
      this.modal = false;
      this.reset()
    },
    reset() {
      this.data = {
        id: '',
        title: '',
        type_id: '',
        desc: '',
        content: '',
        from_type: 0,
        img_url: '',
        top_status: 1,
      }
    },
    submitForm() {
      let loading = this.$loading()
      request({
        url: '/article/index/save',
        method: 'post',
        data: this.data,
      }).then(res => {
        loading.close()
        this.$parent.getList()
        this.modal = false
        this.reset()
      }).catch(err => {
        loading.close()
        this.$message.error(err.msg)
      })
    },
    handleAvatarSuccess(file, type) {
      let loading = this.$loading()
      let formData = new FormData()
      formData.append('file', file.raw)
      request.post('/teacher/upload', formData, {
        file: true
      }).then(res => {
        loading.close()
        this.data.img_url = res.data.url
      }).catch(err => {
        loading.close()
        this.$message.error(err.msg)
      })
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isLt2M;
    },
  },
};
</script>

<template>
  <el-dialog
    :visible.sync="modal" :title="data.id ? '修改文章' : '添加文章'" width="70vw"
    custom-class="custom-dialog-style"
  >
    <el-form
      :model="data" label-width="100px"
      style="margin-bottom: 120px;"
    >
      <el-form-item label="文章标题">
        <el-input v-model="data.title" label="文章标题"></el-input>
      </el-form-item>
      <el-form-item label="封面">
        <p class="prompt">格式JPG、PNG、JPGE</p>
        <el-upload
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          accept=".jpg, .png, .jpeg"
          :on-change="(file) => handleAvatarSuccess(file, 1)"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="data.img_url" :src="data.img_url" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="分类">
        <el-select v-model="data.type_id">
          <el-option v-for="(item, index) in type_list" :value="item.id" :label="item.type_name" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否置顶">
        <el-radio-group v-model="data.top_status">
          <el-radio :label="1">置顶</el-radio>
          <el-radio :label="2">不置顶</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="查看权限">
        <el-radio-group v-model="data.from_type">
          <el-radio :label="0">所有人</el-radio>
          <el-radio :label="1">企业</el-radio>
          <el-radio :label="2">员工</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="文章摘要">
        <el-input type="textarea" v-model="data.desc" label="文章摘要"></el-input>
      </el-form-item>
      <el-form-item label="文章详情">
        <WangEditor style="width: 100%" :content="data.content" @editorContent="getEditorContent"></WangEditor>
      </el-form-item>
      <div class="footer">
        <el-button @click="back">关闭</el-button>
        <el-button type="primary" size="medium" @click="submitForm()">保存</el-button>
      </div>

    </el-form>
  </el-dialog>
</template>

<style scoped>
.footer {
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e6e6e6;
}

.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 130px;
  height: 140px;
  display: flex;
  align-items: center;
}

.avatar-uploader /deep/ .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  line-height: 140px;
  text-align: center;
}

.avatar {
  width: 100%;
  display: block;
}
.prompt {
  font-size: 12px;
  color: red;
  margin-bottom: 5px;
}
</style>
<style>
.custom-dialog-style .el-dialog__body {
  height: 70vh;
}
</style>